<template>
    <div class="contain">
        <div class="content_bg" :style="{backgroundImage:`url(${content_bg})`}">
            <div class="times">
                <img src="@static/ability/times.png" alt="">
            </div>
        </div>
        <div class="wrap d-col-none d-lg-block">
            <div class="title"><img src="@static/ability/content_title.png"></div>
            <div class="content">
                <div class="message_one">
                    <div class="new_retail">
                        <div class="new_retail_top"><img src="@static/ability/1.png"></div>
                        <div class="new_retail_bott"><img src="@static/ability/new_retail_1.png"></div>
                    </div>
                    <div class="middle">
                        <div class="tit">
                            <img src="@static/ability/retail_1.png">
                        </div>
                        <div class="font">
                            <span>
                                一：支持超多行业的零售小程序，并全程提供新零售经营系统支持
                                和开店运营指导
                            </span>
                            <br />
                            <span>
                                二：全渠道新零售解决方案，帮助商家扩增量、盘存量、经营提效
                                带来更多生意
                            </span>
                        </div>
                    </div>
                    <div class="room">
                        <img src="@static/ability/content_1.png">
                    </div>
                </div>
                <div class="message_two">
                    <div class="new_retail">
                        <div class="new_retail_top"><img src="@static/ability/2.png"></div>
                        <div class="new_retail_bott"><img src="@static/ability/data_force_2.png"></div>
                    </div>
                    <div class="middle">
                        <div class="tit">
                            <img src="@static/ability/data_2.png">
                        </div>
                        <div class="font">
                            <span>
                                一：分析店铺经营问题，寻找增长点
                            </span>
                            <br />
                            <span>
                                二：了解消费者，精准锁定目标用户
                            </span>
                            <br />
                            <span>
                                三：智能匹配人与商品，快速搭建会员体系
                            </span>
                        </div>
                    </div>
                    <div class="room">
                        <img src="@static/ability/content_2.png">
                    </div>
                </div>
                <div class="message_three">
                    <div class="new_retail">
                        <div class="new_retail_top"><img src="@static/ability/3.png"></div>
                        <div class="new_retail_bott"><img src="@static/ability/value_of.png"></div>
                    </div>
                    <div class="middle">
                        <div class="tit">
                            <img src="@static/ability/value_3.png">
                        </div>
                        <div class="font">
                            <span>
                                一：帮助商家对接多个流量端资源，实现快速卖货
                            </span>
                            <br />
                            <span>
                                二：强大数据体系沉淀用户数据，助力商家私有化用户资产
                            </span>
                            <br />
                            <span>
                                三：全赞自有资源和营销玩法赋能商家，丰富卖货手段
                            </span>
                        </div>
                    </div>
                    <div class="room">
                        <img src="@static/ability/content_3.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap_block d-lg-none">
            <div class="title"><img src="@static/ability/content_title.png"></div>
            <div class="content">
                <div class="message_one">
                    <div class="new_retail">
                       <img src="@static/ability/1.png">
                    </div>
                    <div class="middle">
                        <div class="tit">
                            <img src="@static/ability/retail_1.png">
                        </div>
                        <div class="font">
                            <span>
                                一：支持超多行业的零售小程序，并全程提供新零售经营系统支持
                                和开店运营指导
                            </span>
                            <br />
                            <span>
                                二：全渠道新零售解决方案，帮助商家扩增量、盘存量、经营提效
                                带来更多生意
                            </span>
                        </div>
                    </div>
                </div>
                <div class="message_two">
                    <div class="new_retail">
                        <div class="new_retail_top"><img src="@static/ability/2.png"></div>
                    </div>
                    <div class="middle">
                        <div class="tit">
                            <img src="@static/ability/data_2.png">
                        </div>
                        <div class="font">
                            <span>
                                一：分析店铺经营问题，寻找增长点
                            </span>
                            <br />
                            <span>
                                二：了解消费者，精准锁定目标用户
                            </span>
                            <br />
                            <span>
                                三：智能匹配人与商品，快速搭建会员体系
                            </span>
                        </div>
                    </div>
                </div>
                <div class="message_three">
                    <div class="new_retail">
                        <div class="new_retail_top"><img src="@static/ability/3.png"></div>
                    </div>
                    <div class="middle">
                        <div class="tit">
                            <img src="@static/ability/value_3.png">
                        </div>
                        <div class="font">
                            <span>
                                一：帮助商家对接多个流量端资源，实现快速卖货
                            </span>
                            <br />
                            <span>
                                二：强大数据体系沉淀用户数据，助力商家私有化用户资产
                            </span>
                            <br />
                            <span>
                                三：全赞自有资源和营销玩法赋能商家，丰富卖货手段
                            </span>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            content_bg:require('@static/ability/content_bg.png'),
        }
    }
}
</script>

<style scoped lang="stylus">
@media (min-width: 300px) {
    .contain{
        position:relative
        height:700px !important
        .content_bg{
            width:90% !important
            margin:0 5% !important
            height:200px !important
            .times{
            }
        }
        .wrap_block{
            position:absolute
            top:200px
            .title{
                width:218px !important
                height:28px !important
                margin:20px auto !important
            }
            .content{
                width:90% !important
                margin:0 5% !important
                .message_one,.message_two,.message_three{
                    margin-top: 20px
                    display:flex
                    .new_retail{
                        margin-top:10px
                        flex-grow:1
                        width:100px
                        height:100px
                        margin-right:10px
                    }
                    .middle{
                        width:100% !important
                        height: auto !important
                        margin-bottom:40px !imortant

                        .tit{
                            width:58px !important
                            height:18px !important
                            margin-bottom:10px !important
                            
                            img{
                                width:100%
                                height:100%
                            }
                        }
                        .font{
                            line-height:20px !important
                            font-size:12px !important
                        }
                    }
                    

                }

            }

        }
    }
}
@media (min-width: 922px) {
    .contain{
        // position:relative
        height:2300px !important
        .content_bg{
            width:100% !important
            height:400px !important
            margin:0 !important
        }
        .wrap_block{
            position:absolute
            top:200px
            .title{
                width:218px !important
                height:28px !important
                margin:20px auto !important
            }
            .content{
                width:90% !important
                margin:0 5% !important
                .message_one,.message_two,.message_three{
                    margin-top: 20px
                    display:flex
                    .new_retail{
                        margin-top:10px
                        flex-grow:1
                        width:100px
                        height:100px
                        margin-right:10px
                    }
                    .middle{
                        width:100% !important
                        height: auto !important
                        margin-bottom:40px !imortant

                        .tit{
                            width:58px !important
                            height:18px !important
                            margin-bottom:10px !important
                            
                            img{
                                width:100%
                                height:100%
                            }
                        }
                        .font{
                            line-height:20px !important
                            font-size:12px !important
                        }
                    }
                    

                }

            }

        }
    }
}
    .contain
        width:100%
        height:2300px
        img 
            width:100%
            height:100%
        .content_bg
            width:100%
            height:484px
            background:center
            background-size:cover
            position:relative
            .times
                position:absolute
                left:50%
                top:50%
                transform:translate(-50%,-50%)
                width:237px
                height:59px
        .wrap
            display:flex
            flex-direction:column
            width:1200px
            height:100%
            margin: 0 auto
            .title
                width:238px
                height:55px
                margin: 100px auto
                padding-bottom:20px
                border-bottom:2px solid #9ca8fa
            .content
                display:flex
                flex-direction:column
                .message_one
                    height:500px

                    position:relative
                    .new_retail
                        width:201px
                        height:229px
                        position:absolute
                        left: 159px;
                        top: -28px;
                        
                        .new_retail_top
                            width:201px
                            height:229px
                            overflow hidden

                        .new_retail_bott
                            width:155px
                            height:19px
                            position:absolute
                            bottom:0
                            left:0


                    .middle
                        width:523px
                        height:228px
                        position:absolute
                        left: 348px;
                        top: -31px;

                        margin-left: 26px
                        .tit
                            width:87px
                            height:29px
                            // img
                        .font
                            font-size:19px
                            color:#656da4
                            margin-top: 33px

                            span
                                display:inline-block
                                line-height: 30px
                                margin-top: 20px


                    .room
                        width:528px
                        height:464px
                        position:absolute
                        right:-40px
                .message_two
                    height:500px

                    position:relative
                    .new_retail
                        width:201px
                        height:229px
                        position:absolute
                        left: 496px;
                        top: -65px;
                        
                        .new_retail_top
                            width:201px
                            height:229px
                            overflow hidden

                        .new_retail_bott
                            width:155px
                            height:19px
                            position:absolute
                            bottom:0
                            left:0


                    .middle
                        width:523px
                        height:228px
                        position:absolute
                        right: -29px;
                        bottom: 265px;

                        margin-left: 26px
                        .tit
                            width:87px
                            height:29px
                            // img
                        .font
                            font-size:19px
                            color:#656da4
                            margin-top: 33px

                            span
                                display:inline-block
                                line-height: 30px
                                margin-top: 20px


                    .room
                        width:528px
                        height:464px
                        position:absolute
                        left:84px
                .message_three
                    height:500px
                    position:relative
                    .new_retail
                        width:201px
                        height:229px
                        position:absolute
                        right: 0px;
                        top: -28px;
                        
                        .new_retail_top
                            width:201px
                            height:229px
                            overflow hidden

                        .new_retail_bott
                            width:155px
                            height:19px
                            position:absolute
                            bottom:0
                            left:0


                    .middle
                        width:523px
                        height:228px
                        position:absolute
                        left: 160px;
                        top: 140px;

                        margin-left: 26px
                        .tit
                            width:87px
                            height:29px
                            // img
                        .font
                            font-size:19px
                            color:#656da4
                            margin-top: 33px

                            span
                                display:inline-block
                                line-height: 30px
                                margin-top: 20px


                    .room
                        width:528px
                        height:464px
                        position:absolute
                        right:-40px
                        top:102px

</style>